<style type="text/css">
	.contextmenu li:hover {
		background: #91C9F7
	}

	.contextmenu {
		display: none;
		position: absolute;
		width: 150px;
		border:1px solid #e0e0e0;
		background: #f5f5f5;
		overflow: hidden;
		z-index: 99;
		font-size:11px
	}

	.contextmenu li{ 
		transition: ease 0.3s;
		white-space:nowrap;
	}

	.contextmenu li:not(:last-of-type){ 
		border-bottom:1px solid #d3d3d3
	}

	.contextmenu li a {
		display: inline-block;
		padding: 6px 6px 6px 20px;
		width:150px;
		min-width:150px;
		color: #000000;
		text-decoration: none;
		transition: ease 0.3s;	
	}

	.edit-table-mul div.col{
		1border:1px solid red
	}

</style>
<div class="card">
	<div class="card-content">
		<div class = 'row row-head' >

			<div class = 'col s6'>
				标题：<input type = 'text' class = 'aya-input width-200' id = 'title' />
			</div>

			<div class = 'col s6'>
				
				<button class = 'btn btn-default btn-default-1' id = 'edit-form'>  <i class="material-icons text-color5"  >share</i> 编辑流程</button>

				<button class = 'btn btn-default btn-default-1' id = 'see-form' style = 'display:none'>  <i class="material-icons text-color5"  >share</i> 查看流程</button>

				<button class = 'btn btn-default btn-default-1' id = 'select-form'>  <i class="material-icons text-color5"  >subject</i> 流程模板</button>

				<button class = 'btn btn-default btn-default-1' id = 'free-flow'>  <i class="material-icons text-color5"  >subject</i> 自由流程</button>

				<button class = 'btn btn-default btn-default-1' id = 'send' >  <i class="material-icons text-color3"  >add_box</i> 发送</button>

			</div>
		</div>

		<div class = 'row row-body' id = 'form-content-free-flow' style = 'background:#fff;text-align:center;padding:10px 0 0 0'>

			<textarea id = 'myEditor' style = 'margin:auto;display:inline-block'>

			</textarea>
			
		</div>

		<div class = 'row row-body' id = 'form-content-template' style = 'background:#fff;text-align:center;padding:10px 0 0 0;display:none'>

			<textarea id = 'myEditor' style = 'margin:auto;display:inline-block'>

			</textarea>
			
		</div>


	</div>
					
</div>
</div>
<ul class="contextmenu" id = 'contextmenu'>
			<li><a href="javascript:void(0)" id = 'line-height-mul'>行高（重复表）</a></li>
			<li><a href="javascript:void(0)" id = 'row-width-mul'>列宽（重复表）</a></li>
			<li><a href="javascript:void(0)" id = 'insert-col-mul'>插入一行</a></li>
		</ul>

<script>


	var app = {

		flow_node : '',

		flow_p : '',

		ue : {},

		template_id : 0,

		tmp : new Map(),

		mSelected: '',

		auth : {},

		attr : {},

		selected_tr : '',

		current : {},

		relation : {},

		get1 : function(that){
			let top  =  ($(that).parent().height() +  parseInt($(that).parent().css('paddingTop')) + parseInt($(that).parent().css('paddingBottom')) + parseInt($(that).parent().css('borderTopWidth')) + parseInt($(that).parent().css('borderBottomWidth'))) / 2 - 9 ;

			return { top : top };
		},

		load_template : function(id){

			app.template_id = id;

			
			$.post('__APP__/Fs/load_template',{id:id},function(d){
				if(d.status != 's'){
					 layer_error(d);
					 return false;
				}
				$('#edit-form').hide();
				$('#see-form').show();
				$('#form-content-free-flow').hide();
				$('#form-content-template').show();
				max_height('form-content-template',false);
				app.auth = d.data.auth;
				app.attr = d.data.attr;

				
				
				$('#form-content-template').html(d.data.form);

				$('#form-content-template').find('input').each(function(){
					let i = $(this).parents('td').data('i') || $(this).data('i');
					let a = app.auth[i];
					if( !$(this).parents('table').hasClass('table-mul') ) $(this).attr('id',i);

					if(a){
						if( parseInt(a.a) == 1){
							if( parseInt(a.m) == 1 ) $(this).addClass('must');
							$(this).addClass('edit');
							switch(a.b){
								case 'person' :
									if(a.person_id){
										$(this).val(a.person_name).data('id',a.person_id);
									}
									$(this).parent().append("<img class = 'absolute select-person height18' src = '__PUBLIC__/image/flow/select-person.png' style = 'right:4px;top:"+app.get1(this).top+"px' />");
								break;
								case 'relation' :
									
								break;
								case 'checkbox' :
									if( a.d == 1){
										$(this).prop('checked',true);
									}
								break;
								case 'radio' :
									if( a.d == 1){
										$(this).prop('checked',true);
									}
								break;
								default:
									$(this).removeAttr('readonly');
									if(a.d){
										$(this).val(a.d);
									}
							}
						}else if( parseInt(a.a) == 0){
							if(a.b != 'relation') $(this).addClass('read');
							
							switch(a.b){
								case 'varchar' :
									//$(this).prop('disabled',true);
									//$(this).parents('td').text( '' );
								break;
								case 'checkbox' :
									$(this).attr('disabled',true);
								break;
								case 'radio' :
									$(this).attr('disabled',true);
								break;
								
								case 'relation':
									if(a.d) $(this).val(a.d);
									app.relation[i] = app.attr[i].relation_i;
									$(this).parent().append("<img class = 'absolute select-"+a.relation_a+" height18' src = '__PUBLIC__/image/flow/relation-"+a.relation_a+".png' style = 'right:4px;top:"+app.get1(this).top+"px' />");
								break;
								default:
							}
						}	
					}

				});

				$('#form-content-template').find('select').each(function(){
					let that = this;
					let i = $(this).parents('td').data('i');
					let a = app.auth[i];
					
					if( a.z == 1 ) $(this).attr('id',i);
					$(this).empty();
					$(this).append( "<option value = ''></option>" );
					$(d.data.select[i]).each(function(i,v){
						$(that).append( "<option value = '"+v.id+"'>"+v.name+"</option>" );
					});
					if( a.a != 1 ) $(this).attr('disabled',true);
					if( a.d ) $(this).val( a.d );
				});

				$( '.table-mul' ).each(function(){
					app.re_index( this );
				});

				app.table_mul_add_row();

				$('.select-person').click(function(){
					app.current = $(this).parent().find('input');
					let i = $(this).parent().data('i');
					parent.layer.open({
						title:"<span style = 'font-size:12px'>选择员工</span>",
						area: ['600px','500px'],
						offset:'10%',
						shadeClose:true,
						isOutAnim: false ,
						maxmin: true,
						type: 2,
						btn : ['确定'],
						content:'__APP__/PublicGet/select_person',
						yes : function(index,layero){
							var iframeWin = window[layero.find('iframe')[0]['name']];
						
							if( iframeWin.$('#tbody tr.selected').length == 0 || iframeWin.$('#tbody tr.selected').eq(0).children().eq(0).text() == '-' ){
								layer_error({ info : '请选择员工' });
								return false;
							}

							let id   = iframeWin.$('#tbody tr.selected').eq(0).data('id');
							let employee = iframeWin.app.d[id];

							app.current.val(employee.v).data('id',id);

							$.each(app.relation,function(k,v){
								if( v == i ){
									$('#' + k ).val( employee[ app.attr[k].relation_a] );
								}
							});
							
							parent.layer.close( index );
						},

					});
		
				});

				
				{ // 给没有默认值的radio选中第一个
					let radio = {};
					$("input[type='radio']").each(function(){
						let name = $(this).attr('name');
						if(!radio[name]){
							radio[name] = [];
						}
						radio[name].push($(this).attr('id'));
					});

					$.each(radio,function(k,v){
						let hasChecked = false;
						$.each(v,function(k1,v1){
							if( $('#' + v1).is(':checked') ){
								hasChecked = true;
								return true;
							}
						});
						if( !hasChecked ){
							$( '#' + v[0] ).attr('checked',true);
						}
					});
				}

				

			});
		},

		

		table_mul_add_row : function(){

			$('.table-mul').on('contextmenu','tr',function(){
				app.selected_tr = this;
				if( $(this).find('th').length > 0) return false;
				layer.open({
					skin: 'layer-edit-container',
					title: '编辑重复表',
					offset: ['20%'],
					area  : ['200px',"230px"],
					btn : ['取消'],
					shadeClose:true,
					content : "<div class = 'row edit-table-mul'><div class = 'col s6'>插入 <input type = 'text' value = '1' class = 'aya-input' style = 'width:30px;text-align:center;padding:0;text-indent:0' id = 'add_row_num' /> 行</div><div class = 'col s6' style = 'text-align:center'><button class = 'btn btn-default height32' id = 'add_row'>确定</button></div><div class = 'col s12'>&nbsp;</div><div class = 'col s6'>删除此行</div><div class = 'col s6' style = 'text-align:center'><button class = 'btn btn-default height32' id = 'dlt_row'>确定</button></div></div>",
					success : function(layero,index){
						$('#add_row').click(function(){
							let n = parseInt($.trim($('#add_row_num').val()));
							if(isNaN(n)) return false;
							let html = $(app.selected_tr).prop('outerHTML');
							for(let i = 0; i < n - 1; i++){
								html += html;
							}
							$(app.selected_tr).after( html );
							app.re_index( $(app.selected_tr).parents('.table-mul') );
						});
						$('#dlt_row').click(function(){
							let table = $(app.selected_tr).parents('.table-mul')
							if( table.find('tbody').eq(0).children().length < 2) return false;
							$(app.selected_tr).remove();
							app.re_index( table );
							layer.close(index);
						});
					},
					yes : function (index,layero){
						layer.close(index);
					}
				});
				return false;
			});
		},


		re_index : function( table ){
			var index = [];
			
			$(table).find('tbody').eq(0).find('tr').eq(0).children().each(function(i,v){
				if ( $(this).data('type') == 'index-mul' ){
					index.push(i);
				}
			});
			let i = 1;
			index.forEach(function(v,k){
				i = 1;
				$(table).find('tbody').eq(0).find('tr').each(function(){
					$(this).children().eq(v).text(i++);
				});
			});
		},


		send: function( exc = ''){

			let o = {};
			let field = {};
			let subField = {};
			o.template_id = app.template_id;
			
			if(app.template_id == 0){  // 自定义流程
				o.title = $.trim($('#title').val());
				o.p = JSON.stringify(app.flow_p);
				o.node = JSON.stringify(app.flow_node);
				o.form = app.ue.getContent();
			}else{
				// 模板流程
				
				$.each(app.auth,function(k,v){
					if( v.z == 1 ){  // 主表
						
						
						if( v.a == 1 ){ // 具有编辑权限
							switch(v.b){
								case 'checkbox' :
									field[k] = $('#' + k).is(':checked')?1:0;
								break;
								case 'radio' :
									field[k] = $('#' + k).is(':checked')?1:0;
								break;
								case 'person' :
									field[k] = $('#' + k).data('id');
								break;
								default:
									field[k] = $.trim( $('#' + k).val() );
									
							}
						}else if( v.a == 0 ){
							if(v.b == 'relation'){
								field[k] = $.trim( $('#' + k).val() );
							}
						}
					}
				});

				
				
				$('.table-mul').each(function(){
					let table = $(this).data('table');
					subField[table] = [];
					$(this).find('tbody').eq(0).children().each(function(){
						let trs = $(this).children();
						let tmp = {};
						trs.each(function(ii,vv){
							let i = $(vv).data( 'i' );
							let type = $(vv).data( 'type' );
							switch( type ){
								case 'index-mul' :
									tmp[i] = $(vv).text();
								break;
								case 'text-mul' : 
									tmp[i] = $(vv).find('input').eq(0).val();
								break;
								case 'select-mul' :
									tmp[i] = $(vv).find('select').eq(0).val();
								break;
								default:
							}
						});
						subField[ table ].push( tmp );
					});
				});

				o.field = field;
				o.subField = subField;

			}

			
			
			

			if(exc != '') o.executor = exc;

			
			$('.field-error').removeClass('field-error');

			$.post('__APP__/Fs/send',o,function(d){

				if(d.status == 's'){
					layer_success('发送成功！',2000);
					$('#title').val('');
				}else if(d.status == 'e'){

					$.each(d.data,function(k,v){
						$('#' + v.i).addClass('field-error');
					});

					layer_error(d);
				}else if(d.status == 'm'){
				//选择审核人 - 开始
					app.tmp = new Map();
					let c = "<div style = 'font-size:12px;'>";
					for(let i in d.data){
						let zxmsName = '';
						if(d.data[i]['zxms'] == 1) zxmsName = '单人执行';
						if(d.data[i]['zxms'] == 2) zxmsName = '多人执行';
						c += "<div class = 'row' style = 'margin:0;padding:20px 10px;border-bottom:1px solid #bfbfbf'>"
						c += "<div class = 'col s3 hint1'>"+d.data[i]['name']+"</div><div class = 'col s3'>"+zxmsName+"</div><div class = 'col s6'><input placeholder = '点击选择执行人' id = '"+i+"' data-id = '"+i+"'  data-zxms = '"+d.data[i]['zxms']+"' type = 'text' class = 'aya-input xzfzclr' style = 'height:24px' readonly /></div>";
						c += "</div>";
						app.tmp.set(i,d.data[i]['list']);
					}
					c += "</div>";		
					
					let index = parent.layer.open({
						title : '<span style = "font-size:12px">选择分支处理人</span>',
						offset : ['48px'],
						area  : ['900px','660px'],
						type  : 1,
						btn   : ['确定'], //aya_mom_moallocate_change
						shadeClose:true,
						content : c,
						yes : function(){
							let a = [];
							let allSelected = true;
							parent.$('input.xzfzclr').each(function(){
								let tmp = {};
								tmp.id = $(this).data('id');
								if($(this).data('executor') == undefined || $(this).data('executor') == '[]'){
									allSelected = false;
									return false;
								}else{
									tmp.executor = $(this).data('executor');
								}
								a.push(tmp);
							});

							if(allSelected == false){
								layer.msg('请选择执行人',{icon:2,time:1500,offset:'30%'});
								return false;
							}
							app.send(JSON.stringify(a));
							layer.close(index);

						},
						success : function(layero, index){
							parent.$('input.xzfzclr').click(function(){

								let t = $(this).parent().prev().prev().text();

								let id = $(this).data('id');

								app.mSelected = id;

								let zxms = $(this).data('zxms');


								let n = "<div class = 'row' style = 'margin:0'><div class = 'col s12' id = 'top123'><div style = 'display:inline-block;width:50%;position:relative'><input id = 'i20191119' placeholder = '按回车搜索' type = 'text' class = 'aya-input' style = 'height:24px;width:100%' /><img class = 'icon4' src = '__PUBLIC__/image/search.png' style = 'position:absolute;right:0;top:3px;height:18px'/></div></div><div class = 'col s12'><table id = 't20191119' class = 'centered dataTable row-border noselect table-small'><thead><tr></tr><tr><th></th><th>工号</th><th>姓名</th></tr></thead><tbody>";

								let selected = new Map();
								if(parent.$('#' + app.mSelected).data('executor') != undefined){
									JSON.parse(parent.$('#' + app.mSelected).data('executor')).forEach(function(v,k){
										selected.set(v.k,1);	
									});
								}
								
								let tmp1 = '',tmp2 = '';
								
								app.tmp.get(id).forEach(function(v,k){
									if(selected.get(v.k) == undefined){
										tmp1 += "<tr><td><input type = 'checkbox' class = 'aya-checkbox' /></td><td>"+v.k+"</td><td>"+v.v+"</td></tr>";
									}else{
										tmp2 += "<tr class = 'selected'><td><input type = 'checkbox' class = 'aya-checkbox' checked /></td><td>"+v.k+"</td><td>"+v.v+"</td></tr>";
									}
										
								});

								n = n + tmp2 + tmp1;

								n += "</tbody></table></div><div class = 'col s12 center' style = 'padding:8px' ><button class = 'btn btn-primary height32' id = 'btn20191119'>确定</button></div></div>";


						
								parent.layer.open({
									title : '<span class = "hint2" style = "font-size:12px">选择分支处理人（'+t+'）</span>',
									offset : ['48px'],
									area  : ['500px','660px'],
									type  : 1,
									shadeClose:false,
									content: n,
									success : function(layero2, index2){
										
										let scrollY = 562 - $('#top123').height()  - top.$('#btn20191119').parent().height();
										if(top.mainPage.multiType == 1) scrollY -= 26;

										let setting = {
											paging: false,
											scrollY: scrollY ,
											info:false,
											ordering:false,
											dom:'t',	
										};

										let t20191119 = parent.$('#t20191119').DataTable(setting);

										if(zxms == 1){
											parent.select_tr('t20191119');
										}else{
											parent.select_tr2('t20191119');
										}
										

											
										parent.$('#i20191119').keypress(function(e){
										
											let text = $.trim(parent.$('#i20191119').val());
											
											if(e.keyCode == 13){
												t20191119.search(text).draw();
											}
										});
											
										parent.$('#btn20191119').click(function(){
											let a = [];
											parent.$('#t20191119 tbody tr.selected').each(function(){
												let tmp = {};
												tmp.k = $(this).children().eq(1).text();
												tmp.v = $(this).children().eq(2).text();
												a.push(tmp);
											});
											if(a.length == 0){
												layer.msg('请选择执行人',{icon:2,time:1500,offset:'30%'});
											}else{
												parent.$('#'+app.mSelected).data('executor',JSON.stringify(a));
												let tmp = ''
												for(let i = 0; i < a.length; i++){
													if( i == a.length - 1){
														tmp += a[i]['v'];
													}else{
														tmp = tmp + a[i]['v'] + ',';
													}
												}
												$('#'+app.mSelected).val(tmp);
												parent.layer.close(index2);
											}
										});

									}
										
								});

							});

						},
					});

				// 选择审核人 - 结束
				}
			});



		},

		ini : function(){

			max_height('form-content-free-flow',false);
			
			app.ue = UE.getEditor('myEditor',{initialFrameHeight:$('#form-content-free-flow').height() - 100});
			$('.edui-container').height( $('#form-content-free-flow').height() );

			$('#send').click(function(){
				app.send();
			});

			
			
			$('#select-form').click(function(){
				layer.open({					
					type: 2,
					isOutAnim: false ,
					title: '<span class = "text-color2">选择流程模板</span>',
					maxmin: true,
					shadeClose: true, //点击遮罩关闭层
					offset : ['10%'],
					area : ['600px','500px'],
					content: '__APP__/Fs/selectFlow',
					success : function (layero,index){
						
					}
				});
			});
			
			//$('#select-form').trigger('click');

			$('#free-flow').click(function(){
				app.template_id = 0;
				$('#edit-form').show();
				$('#see-form').hide();
				$('#form-content-template').hide();
				$('#form-content-free-flow').show();
			});

			$('#edit-form').click(function(){
				layer.open({					
					type: 2,
					isOutAnim: false ,
					title: '<span class = "text-color2">编辑流程</span>',
					maxmin: true,
					shadeClose: true, //点击遮罩关闭层
					area : ['1200px','100%'],
					content: '__APP__/Fs/customFlow',
					success : function (layero,index){
						let top = ($('.layui-layer-title').eq($('.layui-layer').length - 1).height() - 32) / 2;
						let left = ($('.layui-layer-title').eq($('.layui-layer').length - 1).width() - 51) / 2;
						if(top < 0) top = 4.5;
						parent.$('.layui-layer').eq($('.layui-layer').length - 1).append('<button id = "flow_save" style = "position:absolute;top:'+top+'px;left:'+left+'px;z-index:9999999999;cursor:pointer" class = "btn btn-default height32 btn-noshadow">保存</button>');

						$('#flow_save').click(function(){
							var iframeWin = window[layero.find('iframe')[0]['name']];
							iframeWin.flow.save();
						});
					}
				});
			});

			$('#see-form').click(function(){
				parent.layer.open({
					title:'<span style = "font-size:12px">流程查看</span>',
					type: 2,
					shadeClose:true,
					offset:'0',
					area: ['90%','100%'],
					content: "__APP__/Fs/see2?flowid="+app.template_id,
					isOutAnim: false,
				});

			});

		}

		

	}


	app.ini();


	
</script>



